
import './manage.css';
import { useState, useEffect } from "react"
import axios from 'axios';
import * as echarts from 'echarts';

export default function Manage() {
    let [user, setuser] = useState(null)
    let [order, setorder] = useState(null)
    let [controller, setcontroller] = useState(null)
    let [userAll, setuserAll] = useState(null)
    let [orderAll, setorderAll] = useState(null)
    let [controllerAll, setcontrollerAll] = useState(null)
    let days = []
    let date = new Date()
    let d = date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0')
    days.unshift(d)
    for (let i = 0; i < 6; i++) {
        date.setDate(date.getDate() - 1)
        let d = date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0')
        days.unshift(d);
    }
    var nowdate = date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0')
    let userArr = []
    let orderArr = []
    let controllerArr = []

    useEffect(() => {
        var myChart = echarts.init(document.getElementById('chart1'));
        myChart.setOption({
            title: {
                text: '走势图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['新注册用户', '新增订单', '新增管理员',]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: d
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '新注册用户',
                    type: 'line',
                    stack: 'Total',
                    data: []

                },
                {
                    name: '新增订单',
                    type: 'line',
                    stack: 'Total',
                    data: []
                },
                {
                    name: '新增管理员',
                    type: 'line',
                    stack: 'Total',
                    data: []
                },

            ]
        })

        axios(`https://elm.cangdu.org/statis/user/${nowdate}/count`).then(res => {
            if (res.data.status === 1) {
                setuser(res.data.count)
            }
        })
        axios(`https://elm.cangdu.org/statis/order/${nowdate}/count`).then(res => {
            if (res.data.status === 1) {
                setorder(res.data.count)
            }
        })
        axios(`https://elm.cangdu.org/statis/admin/${nowdate}/count`).then(res => {
            if (res.data.status === 1) {
                setcontroller(res.data.count)
            }
        })
        axios(`https://elm.cangdu.org/v1/users/count`).then(res => {
            if (res.data.status === 1) {
                setuserAll(res.data.count)
            }
        })
        axios(`https://elm.cangdu.org/bos/orders/count`).then(res => {
            if (res.data.status === 1) {
                setorderAll(res.data.count)
            }
        })
        axios(`https://elm.cangdu.org/admin/count`).then(res => {
            if (res.data.status === 1) {
                setcontrollerAll(res.data.count)
            }
        })

        days.forEach(i => {
            //echarts 用户
            var puser = new Promise((resolve, reject) => {
                axios(`https://elm.cangdu.org/statis/user/${i}/count`).then(res => {
                    if (res.data.status === 1) {
                        resolve(res.data.count)
                    }
                }).catch((error) => {
                    reject(error)
                })
            })
            userArr.push(puser)

            //echarts 订单
            var porder = new Promise((resolve, reject) => {
                axios(`https://elm.cangdu.org/statis/order/${i}/count`).then(res => {
                    if (res.data.status === 1) {
                        resolve(res.data.count)
                    }
                }).catch((error) => {
                    reject(error)
                })
            })
            orderArr.push(porder)

            //echarts 管理员
            var pcontroller = new Promise((resolve, reject) => {
                axios(`https://elm.cangdu.org/statis/admin/${i}/count`).then(res => {
                    if (res.data.status === 1) {
                        resolve(res.data.count)
                    }
                }).catch((error) => {
                    reject(error)
                })
            })
            controllerArr.push(pcontroller)


        })

        Promise.all([...userArr, ...orderArr, ...controllerArr]).then(res => {
            // console.log(res);
            myChart.setOption({
                series: [
                    {
                        name: '新注册用户',
                        type: 'line',
                        stack: 'Total',
                        data: res.slice(0, 7)

                    },
                    {
                        name: '新增订单',
                        type: 'line',
                        stack: 'Total',
                        data: res.slice(7, 14)
                    },
                    {
                        name: '新增管理员',
                        type: 'line',
                        stack: 'Total',
                        data: res.slice(14, 21)
                    },

                ]
            })
        })

    }, [])


    return (
        <div className='managebody'>
            <section className='data_section'>
                <header className='section_title'>数据统计</header>
                <div className='el-row'>
                    <div className='el-col'>
                        <div className='data_list today_head'>
                            <span className='data_num head'>
                                当日数据 :
                            </span>
                        </div>
                    </div>
                    <div className='el-col'>
                        <div className='data_list '>
                            <span className='data_num '>
                                {user}
                            </span>新增用户
                        </div>
                    </div>
                    <div className='el-col'>
                        <div className='data_list'>
                            <span className='data_num'>
                                {order}
                            </span>新增订单
                        </div>
                    </div>
                    <div className='el-col'>
                        <div className='data_list'>
                            <span className='data_num'>
                                {controller}
                            </span> 新增管理员
                        </div>
                    </div>
                </div>
                <div className='el-row'>
                    <div className='el-col'>
                        <div className='data_list all_head'>
                            <span className='data_num head'>
                                总数据 :
                            </span>
                        </div>
                    </div>
                    <div className='el-col'>
                        <div className='data_list '>
                            <span className='data_num '>
                                {userAll}
                            </span>注册用户
                        </div>
                    </div>
                    <div className='el-col'>
                        <div className='data_list'>
                            <span className='data_num'>
                                {orderAll}
                            </span>订单
                        </div>
                    </div>
                    <div className='el-col'>
                        <div className='data_list'>
                            <span className='data_num'>
                                {controllerAll}
                            </span> 管理员
                        </div>
                    </div>
                </div>

            </section>
            <div id='chart1' ></div>
        </div>
    )
}